<div style="width: 1px;height: 30px;"></div>


<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
          <!-- PIE CHART -->
        <div class="card card-danger">
          <div class="card-header">
            <h3 class="card-title">消费占比</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
              <button type="button" class="btn btn-tool" data-card-widget="remove">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            <canvas id="pieChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
          </div>
            <!-- /.card-body -->
        </div>
          <!-- /.card -->

      </div>
        <!-- /.col (LEFT) -->
      <div class="col-md-6">
          <!-- STACKED BAR CHART -->
        <div class="card card-success">
          <div class="card-header">
            <h3 class="card-title">支出占比</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
              <button type="button" class="btn btn-tool" data-card-widget="remove">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          <div class="card-body">
            <div class="chart">
              <canvas id="stackedBarChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
          </div>
            <!-- /.card-body -->
        </div>
          <!-- /.card -->

      </div>
        <!-- /.col (RIGHT) -->
    </div>
      <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>

<!-- AdminLTE for demo purposes -->
<script src="<?= LTE ?>dist/js/demo.js"></script>
<script type="text/javascript">
  $(function () {
      $("#modal-info").modal({show:true});

      //-------------
      //- PIE CHART -
      //-------------
      // Get context with jQuery - using jQuery's .get() method.
      var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
      <?php $color=['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de','#123d45','#CC0033','#993399','#666633','#CC9933','#3333BB']; ?>
      var donutData        = {
          labels: [
              <?php foreach ($data['pay'] as $k=>$v){ ?>
                    <?= " '".$v['b_name']."'," ?>
              <?php } ?>
          ],
          datasets: [
              {
                  data: [
                      <?php foreach ($data['pay'] as $k=>$v){ ?>
                      <?= " '".$v['consume_money']."'," ?>
                      <?php } ?>
                  ],
                  backgroundColor : [
                      <?php foreach ($data['pay'] as $k=>$v){ ?>
                      <?= " '".$color[rand(0,11)]."'," ?>
                      <?php } ?>
                  ],
              }
          ]
      }
      var pieData        = donutData;
      var pieOptions     = {
          maintainAspectRatio : false,
          responsive : true,
      }
      //Create pie or douhnut chart
      // You can switch between pie and douhnut using the method below.
      new Chart(pieChartCanvas, {
          type: 'pie',
          data: pieData,
          options: pieOptions
      })

      //-------------
      //- BAR CHART -
      //-------------
      var areaChartData = {
          labels  : [
              <?php foreach ($data['user'] as $k=>$v){ ?>
              <?= " '".$v[99999]['real_name']."'," ?>
              <?php } ?>
          ],
          datasets: [
              {
                  label               : '暂无',
                  backgroundColor     : 'rgba(210, 214, 222, 1)',
                  borderColor         : 'rgba(210, 214, 222, 1)',
                  pointRadius         : false,
                  pointColor          : 'rgba(210, 214, 222, 1)',
                  pointStrokeColor    : '#c1c7d1',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(220,220,220,1)',
                  data                : [
                      <?php foreach ($data['times'] as $k=>$v){ ?>
                      0,
                      <?php } ?>
                  ]
              },
              {
                  label               : '支出',
                  backgroundColor     : 'rgba(60,141,188,0.9)',
                  borderColor         : 'rgba(60,141,188,0.8)',
                  pointRadius          : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : [
                      <?php foreach ($data['user'] as $k=>$v){ ?>
                      <?= " '".array_sum(array_column($v,'consume_money'))."'," ?>
                      <?php } ?>
                  ]
              },
          ]
      }
      var barChartData = $.extend(true, {}, areaChartData)
      var temp0 = areaChartData.datasets[0]
      var temp1 = areaChartData.datasets[1]
      barChartData.datasets[0] = temp1
      barChartData.datasets[1] = temp0

      //---------------------
      //- STACKED BAR CHART -
      //---------------------
      var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d')
      var stackedBarChartData = $.extend(true, {}, barChartData)

      var stackedBarChartOptions = {
          responsive              : true,
          maintainAspectRatio     : false,
          scales: {
              xAxes: [{
                  stacked: true,
              }],
              yAxes: [{
                  stacked: true
              }]
          }
      }

      new Chart(stackedBarChartCanvas, {
          type: 'bar',
          data: stackedBarChartData,
          options: stackedBarChartOptions
      })
  })
</script>


<div class="modal fade" id="modal-info">
<div class="modal-dialog">
  <div class="modal-content bg-info">
    <div class="modal-header">
      <h4 class="modal-title">总账单</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>
          当前总消费:<?= array_sum(array_column($data['pay'],'consume_money'))?>
      </p>
       <p>
           <?php $renjun =  round(array_sum(array_column($data['pay'],'consume_money'))/count($data['user']),2); ?>
          人均:<?= $renjun ?>
      </p>
    <p>
        结账:
    </p>
        <?php foreach ($data['user'] as $k=>$v){ ?>
            <p><?= $v[99999]['real_name'] ?>:<?= array_sum(array_column($v,'consume_money'))-$renjun ?></p>
        <?php } ?>

    </div>
    <div class="modal-footer justify-content-between">
      <button type="button" class="btn btn-outline-light" data-dismiss="modal">关闭</button>
    </div>
  </div>
    <!-- /.modal-content -->
</div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
